<template>
  <div class="order-m-index">
    <el-table
      style="height: 100%"
      :data="orderList"
      stripe
      empty-text="暂无数据"
      show-overflow-tooltip
    >
      <el-table-column prop="orderCode" label="订单编号" width="180" />
      <el-table-column prop="status" label="订单状态" width="180">
        <template #default="scoped">
          <el-tag :type="statusTagType(scoped.row.status)">
            {{ statusText(scoped.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="updateTime" label="更新时间" width="180" />
      <el-table-column
        fixed="right"
        label="操作"
        width="auto"
        min-width="180px"
      >
        <template #default="scoped">
          <el-button link type="primary" size="small">详情</el-button>
          <el-button
            link
            type="primary"
            size="small"
            @click="() => openDialog(scoped.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-config-provider :locale="zhCn">
      <el-pagination
        layout="sizes, prev, pager, next, jumper"
        :page-count="pageCount"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
  </div>

  <el-dialog v-model="visible" title="订单详情" width="600px" @close="onClose">
    <div class="dialog-content">
      <el-descriptions title="订单信息" :column="1">
        <el-descriptions-item label="订单编号">
          {{ order.orderCode }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="statusTagType(order.status)">
            {{ statusText(order.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="总金额">
          ¥ {{ order.orderTotalAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">
          {{ formatTime(order.createTime) }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <el-table :data="order.orderItems" style="margin-top: 10px">
        <el-table-column prop="title" label="游戏名称" />
        <el-table-column label="单价">
          <template #default="scope">
            {{ scope.row.priceD ? scope.row.priceD : scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" />
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <template v-if="order.status === 0">
          <el-button type="primary" @click="payOrder">立即支付 </el-button>
        </template>
        <template v-else-if="order.status === 1">
          <el-button type="warning" @click="remindShip">提醒发货</el-button>
        </template>
        <template v-else-if="order.status === 2">
          <el-button type="success" @click="confirmReceipt">确认收货</el-button>
        </template>
        <template v-else-if="order.status === 3">
          <el-button disabled>交易完成</el-button>
        </template>
        <template v-else-if="order.status === 4">
          <el-button disabled type="info">订单已取消</el-button>
        </template>
        <el-button @click="onClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { getOrderListApi, getOrderItemApi } from "@/apis/order";

// 订单数据
const orderList = ref([]);
const pageCount = ref(0);

const param = ref({
  page: 1,
  size: 10,
});

// 弹窗控制
const visible = ref(false);
const order = ref({
  orderCode: "",
  status: 0,
  orderTotalAmount: 0,
  createTime: "",
  orderItems: [],
});

// 请求订单列表
async function getOrderListData(params: any) {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  try {
    const res = await getOrderListApi(params);
    orderList.value = res.data.records;
    pageCount.value = res.data.pages;
  } catch (error) {
    console.error("获取订单失败", error);
  } finally {
    loading.close();
  }
}

async function handleSizeChange(val: number) {
  param.value.size = val;
  await getOrderListData(param.value);
}

async function handleCurrentChange(val: number) {
  param.value.page = val;
  await getOrderListData(param.value);
}

// 弹窗打开
async function openDialog(row: any) {
  const res = await getOrderItemApi(row.id);
  order.value.orderItems = res.data;
  order.value = { ...row };
  visible.value = true;
}

// 弹窗关闭
function onClose() {
  visible.value = false;
}

// 状态文字
function statusText(status: number) {
  switch (status) {
    case 0:
      return "待支付";
    case 1:
      return "已支付";
    case 2:
      return "已发货";
    case 3:
      return "已完成";
    case 4:
      return "已取消";
    default:
      return "未知状态";
  }
}

// 状态对应的标签颜色
function statusTagType(status: number) {
  switch (status) {
    case 0:
      return "warning";
    case 1:
      return "success";
    case 2:
      return "info";
    case 3:
      return "default";
    case 4:
      return "danger";
    default:
      return "danger";
  }
}

// 时间格式
function formatTime(time: string | number | Date) {
  if (!time) return "-";
  const date = new Date(time);
  return date.toLocaleString();
}

// 操作按钮
function payOrder() {
  ElMessage.success("模拟支付成功");
  visible.value = false;
}
function remindShip() {
  ElMessage.info("已提醒发货");
}
function confirmReceipt() {
  ElMessage.success("已确认收货");
  visible.value = false;
}

onMounted(() => {
  getOrderListData(param.value);
});
</script>

<style scoped>
.order-m-index {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.pagination {
  margin: 10px 0;
}
.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}
</style>
